<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline: none;
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <!-- 
        onfocus     获得焦点
        onblur      失去焦点
        onchange    值发生变化的时候，触发的事件
        onselect    选中文本
        onsubmit    表单提交数据的时候触发的事件
        onreset     表单重置的时候触发的事件

     -->
    <!-- <input type="text"> -->

    <form action="http://baidu.com">
        <label for="">用户名 <input type="text"></label>

        <select name="province" id="">
            <option value="gx">广西</option>
            <option value="gd">广东</option>
            <option value="hn">湖南</option>
        </select>
        <input type="submit" name="" value="登录注册" id=""><input type="reset" value="清空数据">
    </form>
    <script>

        var form=document.querySelector("form")
        var input=document.querySelector("input")
        form.onsubmit=function(e)
        {
            if(input.value.indexOf('tmd')>=0)
            {
                alert("你的他妈的个什么！")
                return false;
            }
        }
        form.onreset=function()
        {
            if(!confirm('你确定清空数据吗'))
            {
                return false;
            }
        }

        var inp=document.querySelector("input")
        inp.addEventListener('focus',function(e){
            this.style.borderColor='yellow'
            this.style.fontSize='30px'
        })
        inp.addEventListener('blur',function(e){
            this.style.borderColor='red'
            this.style.fontSize='18px'
        })
        inp.addEventListener('change',function(e){
            console.log('值发生了变化',e);
        })
        var select=document.querySelector("select")
            select.onchange=function()
            {
                inp.value=this.value
            }
    </script>
    
</body>
</html>

